<template>
    <div class="d-flex flex-column align-items-center">
        <!-- 路由占位符 -->
        <div style="width:70%"><router-view /></div>
        <div class="w-100 d-flex justify-content-center align-items-center" style="background-color: #ecf5ff; height:300px">
            <div style="width:60%">
                <el-steps :space="200" :active="active" finish-status="success" align-center>
                    <el-step title="上传项目信息"/>
                    <el-step title="生成AI Prompt (可编辑)"/>
                    <el-step title="查看AI输出结果 (可编辑)"/>
                    <el-step title="标签数据入库"/>
                </el-steps>
            </div>   
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from "vue-router";
const route = useRoute();

// 计算属性，计算步骤
const active = computed(()=>{
    // 当前路由
    const currentPath = route.path;
    // 当前路由父路由的所有子路由
    const parentPaths = route.matched.filter(item => item.path === '/bi_frontend/assetTagging')[0].children;
    // 返回当前路由在所有子路由中下标作为步骤
    return parentPaths.findIndex(item => item.path === currentPath);
})

</script>

<style scoped></style>
